<template>
  <view
    class="custom-tab-bar"
    :style="{ paddingBottom: safeAreaBottom + 'px' }"
  >
    <view class="tab-bar-container">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        :class="{ active: currentIndex === index }"
        @click="switchTab(item, index)"
      >
        <image
          class="tab-icon"
          :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
          mode="aspectFit"
        ></image>
        <text class="tab-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from "@/stores/modules/user";

export default {
  name: "CustomTabBar",
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      safeAreaBottom: 0,
      candidateTabs: [
        {
          pagePath: "/pages/candidate/position/position",
          text: "职位",
          iconPath: "/static/icons/candidate/cand-recommend.png",
          selectedIconPath:
            "/static/icons/candidate/cand-recommend-selected.png",
        },
        {
          pagePath: "/pages/candidate/message",
          text: "消息",
          iconPath: "/static/icons/candidate/cand-msg.png",
          selectedIconPath: "/static/icons/candidate/cand-msg-selected.png",
        },
        {
          pagePath: "/pages/candidate/discover",
          text: "发现",
          iconPath: "/static/icons/candidate/cand-discover.png",
          selectedIconPath:
            "/static/icons/candidate/cand-discover-selected.png",
        },
        {
          pagePath: "/pages/candidate/mine",
          text: "我的",
          iconPath: "/static/icons/candidate/cand-me.png",
          selectedIconPath: "/static/icons/candidate/cand-me-selected.png",
        },
      ],
      companyTabs: [
        {
          pagePath: "/pages/company/recommend/recommend",
          text: "推荐",
          iconPath: "/static/icons/company/recommend.png",
          selectedIconPath: "/static/icons/company/recommend_active.png",
        },
        {
          pagePath: "/pages/company/position/position",
          text: "职位",
          iconPath: "/static/icons/company/position.png",
          selectedIconPath: "/static/icons/company/position_active.png",
        },
        {
          pagePath: "/pages/company/message",
          text: "消息",
          iconPath: "/static/icons/company/msg.png",
          selectedIconPath: "/static/icons/company/msg_active.png",
        },

        {
          pagePath: "/pages/company/mine",
          text: "我的",
          iconPath: "/static/icons/company/me.png",
          selectedIconPath: "/static/icons/company/me_active.png",
        },
      ],
    };
  },
  computed: {
    tabList() {
      const userStore = useUserStore();
      return userStore.userRole === "company"
        ? this.companyTabs
        : this.candidateTabs;
    },
  },
  mounted() {
    // 获取安全区域高度
    this.getSafeAreaBottom();
  },
  methods: {
    getSafeAreaBottom() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        // 兼容不同平台的安全区域获取方式
        if (systemInfo.safeAreaInsets) {
          this.safeAreaBottom = systemInfo.safeAreaInsets.bottom || 0;
        } else if (systemInfo.safeArea) {
          this.safeAreaBottom =
            systemInfo.screenHeight - systemInfo.safeArea.bottom;
        } else {
          this.safeAreaBottom = 0;
        }
      } catch (e) {
        console.warn("获取安全区域失败:", e);
        this.safeAreaBottom = 0;
      }
    },
    switchTab(item, index) {
      if (this.currentIndex === index) return;

      const userStore = useUserStore();

      // 检查是否尝试切换到招聘者页面
      const isCompanyPage = item.pagePath.includes("/pages/company/");
      const isRecruiter = userStore.userRole === "company";

      if (isCompanyPage && !isRecruiter) {
        // 不是招聘者，禁止跳转
        uni.showToast({
          title: "暂无权限访问招聘者页面",
          icon: "none",
          duration: 2000,
        });

        // 自动切换回求职者角色
        userStore.setUserRole("candidate");
        return;
      }

      // 使用redirectTo代替switchTab，因为我们没有原生tabBar
      uni.redirectTo({
        url: item.pagePath,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1rpx solid #e5e5e5;
  z-index: 999;
}

.tab-bar-container {
  display: flex;
  align-items: center;
  height: 98rpx;
  padding: 0 20rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10rpx 0;
  transition: all 0.3s;
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.tab-text {
  font-size: 20rpx;
  color: #8a8a8a;
  line-height: 1;
}

.tab-item.active .tab-text {
  color: #31b9b3;
}
</style>